<template>
  <!-- 评论区 -->
  <div class="evaluate">
    <div class="content">
      <div style="height: 5px"></div>
      <ul class="comment">
        <li class="biaoti">
          <span class="txttltlie">宝贝评价({{ comments.count }})</span>
          <div class="chakan">
            <span>查看全部评价</span>
            <div class="imgs">
              <img src="../../assets/pl.png" alt="" />
            </div>
          </div>
        </li>
        <!-- 精选出来的评论 -->
        <li class="jingxuan">
          <!-- 第一跳评论 -->
          <ul class="xiangqe">
            <li class="nickname">
              <div v-if="comments.count != 0">
                <div v-for="(itme, index) in commentdata" :key="index">
                  <div class="profileNickname">
                    <div class="profile">
                      <img :src="itme.avatar" alt="" />
                    </div>

                    <div class="profiletext">
                      <span>{{ itme.nickname }}</span>
                      <span>{{ itme.addTime }}</span>
                    </div>
                  </div>

                  <div class="imgText">
                    <span>{{ itme.content }}</span>
                  </div>
                  <!-- 图片评论图片 -->
                  <div class="picture" v-if="itme.picList.length >= 4">
                    <div
                      class="pictureImg"
                      v-for="(itme, index) in itme.picList"
                      :key="index"
                    >
                      <van-image
                        v-lazy="item.url"
                        hidden="100%"
                        fit="fill"
                        :src="item.url"
                      />
                    </div>
                  </div>
                </div>
              </div>

              <div v-else class="zhanwu">
                <span>暂无评论</span>
              </div>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "evaluate",
  props: ["comment"],
  data() {
    return {
      comments: [],
      commentdata: [],
      // 评论总数
    };
  },
  watch: {
    comment(val) {
      this.comments = val;
      // console.log(this.comments);
      this.pinglundata(this.comments.data);
    },
  },
  methods: {
    // 处理数据以防出现评论过多的情况
    // 评论处理

    pinglundata(e) {
      // console.log(e);
      if (e.length >= 2) {
        // console.log();
        this.commentdata = e.slice(0, 2);
        // console.log(this.commentdata);
      } else {
        this.commentdata = e;
      }
      this.$forceUpdate();
    },
  },
};
</script>
<style lang="less" scoped>
.evaluate {
  // height: 150px;
  padding-bottom: 5px;
  .content {
    // height: 50px;
    // padding-bottom: 10px;
    // border: 1px solid #000;
    margin: 5px 8px 8px 8px;
    .comment {
      margin-top: 10px;
      color: @colst;
      .biaoti {
        &:nth-child(1) {
          align-items: center;
          display: flex;
          color: @colst;
        }
        .txttltlie {
          flex: 1;
          display: block;
          line-height: 20px;
          height: 20px;
          font-size: 16px;
          color: @colst;
          // border: 1px solid #000;
        }
        .chakan {
          display: flex;

          span {
            color: #b83720;
            margin-right: 5px;
          }
          .imgs {
            width: 10px;
            height: 10px;

            img {
              width: 100%;
              height: 100%;
              transform: rotate(180deg);
            }
          }
        }
      }
      .jingxuan {
        margin-top: 15px;
        // height: 90px;
        // border: 1px solid #000;
        .xiangqe {
          .profileNickname {
            display: flex;
            align-items: center;
            margin-top: 15px;
            .profile {
              width: 40px;
              height: 40px;
              border-radius: 50%;
              margin-right: 5px;
              overflow: hidden;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }

          .nickname {
            height: 100%;
            width: 100%;

            .zhanwu {
            }

            .profiletext {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              height: 100%;
              span {
                display: block;
                &:nth-child(1) {
                  font-size: 16px;
                  margin-bottom: 5px;
                }
                &:nth-child(2) {
                  color: rgb(112, 112, 112);
                }
              }
            }
            .imgText {
              margin-top: 10px;
              color: rgb(53, 53, 53);
              line-height: normal;
            }
            .picture {
              margin-top: 5px;
              display: flex;
              flex-wrap: wrap;
              height: 70px;
              // border: 1px solid #000;
              .pictureImg {
                width: 75px;
                margin-right: 5px;
                height: 70px;
                // border: 1px solid #000;
              }
            }
          }
        }
      }
    }
  }
}
</style>